<template>
  <el-dialog v-bind="$attrs" @close="handleClose" v-on="$listeners">
    <div>
      <el-form :model="form" ref="levelForm" :rules="rules" label-position="top">
        <el-form-item :label="$t('system_menu.level_name')" prop="level_name">
          <el-input
            maxlength="128"
            show-word-limit
            v-model="form.level_name"
            @blur="() => (form.level_name = form.level_name.trim())"
            :placeholder="$t('system_menu.level_name')"
          ></el-input>
        </el-form-item>

        <el-form-item :label="$t('system_menu.level_code')" prop="level_code">
          <!-- <el-select
            :disabled="levelCodeDisabled"
            v-model="form.level_code"
            filterable
            :placeholder="$t('system_menu.level_code')"
            style="width: 100%"
          >
            <el-option
              v-for="item in level_code"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select> -->
          <el-input
            :disabled="levelCodeDisabled"
            maxlength="32"
            show-word-limit
            v-model="form.level_code"
            @blur="() => (form.level_code = form.level_code.trim())"
            :placeholder="$t('system_menu.level_code')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('common.characterCode')" prop="characterCode">
          <el-select
            :disabled="levelCodeDisabled"
            v-model="form.characterCode"
            :placeholder="$t('common.characterCode')"
            class="w-full"
          >
            <el-option
              v-for="(item, index) in characList"
              :key="index"
              :label="$t('system_menu.' + item)"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('system_menu.level_desc')">
          <el-input
            maxlength="256"
            show-word-limit
            type="textarea"
            :rows="2"
            :placeholder="$t('system_menu.level_desc')"
            @blur="() => (form.level_desc = form.level_desc.trim())"
            v-model="form.level_desc"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button text @click="handleClose">{{ $t("common.cancel") }}</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="saveLevel()">{{
          $t("common.confirm")
        }}</el-button>
      </span></template
    >
  </el-dialog>
</template>

<script>
import { checkPhoneNum } from "@/utils/validate";
import { addLevel, editLevel, getLevelInfo, getCharacter } from "@/api/system-menu";
export default {
  data() {
    return {
      confirmLoading: false,
      usernameDisabled: false,
      form: {
        characterLevelId: "",
        level_code: "",
        level_name: "",
        characterCode: "OPERATOR",
        level_desc: "",
      },
      characList: [], //存放获取到的所有character
      level_code: [
        {
          value: "STANDARD_LEVEL",
          label: "STANDARD_LEVEL",
        },
        {
          value: "ENTERPRISE_LEVEL",
          label: "ENTERPRISE_LEVEL",
        },
      ],
      levelCodeDisabled: false, //判断等级编码是否被禁用
      rules: {
        level_name: [
          {
            required: true,
            message: this.$t("common.nullInputTip"),
            trigger: "blur",
          },
        ],
        level_code: [
          {
            required: true,
            message: this.$t("common.nullInputTip"),
            trigger: "blur",
          },
        ],
        characterCode: [
          {
            required: true,
            message: this.$t("common.tip_select"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.getAllCharacter();
  },
  computed: {},
  methods: {
    handleClose() {
      Object.assign(this.form, {
        characterLevelId: "",
        level_code: "",
        level_name: "",
        level_desc: "",
      });
      this.$emit("close");
    },
    getInfo(id) {
      getLevelInfo(id)
        .then((res) => {
          console.log(res);
          this.form.level_code = res.levelCode;
          this.form.level_name = res.levelName;
          this.form.level_desc = res.levelDesc;
          this.form.characterCode = res.characterCode;
        })
        .catch((err) => {
          this.$confirmError(e);
        });
    },
    saveLevel() {
      this.$refs["levelForm"].validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          if (this.form.characterLevelId) {
            let data = {
              levelName: this.form.level_name,
              levelDesc: this.form.level_desc,
              // `characterCode`:this.form.characterCode
            };
            editLevel(this.form.characterLevelId, data)
              .then(() => {
                this.confirmLoading = false;
                this.$message({
                  message: this.$t("common.success"),
                  type: "success",
                });
                this.$emit("submit");
                this.handleClose();
              })
              .catch((e) => {
                this.confirmLoading = false;
                this.$confirmError(e);
              });
          } else {
            // 添加
            let data = {
              characterCode: this.form.characterCode,
              levelCode: this.form.level_code,
              levelName: this.form.level_name,
              levelDesc: this.form.level_desc,
            };
            addLevel(data)
              .then(() => {
                this.confirmLoading = false;
                this.$message({
                  message: this.$t("common.success"),
                  type: "success",
                });
                this.$emit("submit");
                this.handleClose();
              })
              .catch((e) => {
                this.$confirmError(e);
                this.confirmLoading = false;
              });
          }
        } else {
          return false;
        }
      });
    },
    //处理判断是否有些输入框要被禁用
    init(id) {
      this.form.characterLevelId = id;
      if (id) {
        // 编辑
        this.getInfo(id);
        this.levelCodeDisabled = true;
        // this.getEditUserInfo(this.form.userId) 获取相关数据
      } else {
        this.levelCodeDisabled = false;
      }
    },
    //获取所有character
    getAllCharacter() {
      getCharacter()
        .then((res) => {
          console.log("charac", res);
          this.characList = res;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-checkbox__label {
  vertical-align: middle;
  white-space: pre-line;
}
</style>
